<template>
	<view>
		<view class="pug-tabbar-top">
			<u-tabbar
				:value="tabIndex"
				:fixed="false"
				:border="false"
				@change="changeTab"
				:placeholder="false"
				:safeAreaInsetBottom="false"
			>
				<u-tabbar-item text="我的消息" icon="chat"></u-tabbar-item>
				<u-tabbar-item text="订单消息" icon="email"></u-tabbar-item>
				<u-tabbar-item text="系统消息" icon="bell"></u-tabbar-item>
			</u-tabbar>
		</view>
		
		<view class="aui-news-box">
			<view v-for="(list, i) in messageList" :key="list.id" class="aui-news-item">
			<view class="aui-news-item-hd">
				<image :src="list.icon"  class="img"/>
			</view>
			<view class="aui-news-item-bd">
				<h4>{{list.title}}</h4>
				<p>{{list.msgcontent}} = {{list.createTime}}</p>
			</view>
		</view>
		<!--暂无数据处理-->
		<u-empty mode="data" v-if="total == 0" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<pug-loading :loadType="loadType" :bottom='true'></pug-loading>
		<!-- #ifdef MP-WEIXIN || APP -->
		<pug-userinfo></pug-userinfo>
		<!-- #endif -->
		</view>
		<view>{{pageNo}}==={{pages}}=={{total}}</view>
	</view>
	
</template>

<script>
import messageService from '@/service/message/MessageService'
export default {
	data() {
		return {
			title: 'Hello',
			pages:0,
			total:0,
			pageNo:1,
			pageSize:10,
			messageList:[],
			msgtype:1,// 1 我的消息 2 订单消息 3 系统消息
			loadType:-1,
			tabIndex:0,
			
		}
	},
	
	onLoad() {
		// 使用页面的生命周期执行消息初始化
		this.loadData();
	},
	
	created(){
		
	},
			
				
	onReachBottom(){
		uni.$u.debounce(this.loadMore,500);
	},
	
		
	methods: {
		// 3：改变分类
		changeTab(e){
			
			this.tabIndex = e;
			// 这里为什么是e+1 因为e是从0开始的
			this.msgtype = e + 1; 
			// 清空上一次，从新开始
			this.pageNo = 1;
			this.messageList = [];
			this.loadData();
		},
		
		// 2: 加载更多和分页
		loadMore(){
			if(this.pageNo == this.pages){
				this.loadType = 2;
				return;
			}
			
			this.pageNo++;
			this.loadData();
		},
				
		// 1：查询日志信息
		async loadData(){
			try{
				this.loadType = 0;
				var params = {pageNo:this.pageNo,pageSize:this.pageSize,msgtype:this.msgtype};
				var res = await messageService.findMesagePage(params);
				this.messageList = this.messageList.concat(res.data.content);
				this.total = res.data.totalElements;
				this.pages = res.data.totalPages;
				this.loadType = 1;
			}catch(e){
				
			}
		}
	}
}
</script>

<style>

.pug-tabbar-top{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	box-shadow: 0 0 1em #ddd;
	background: #f8f8f8;
	z-index: 1;
}

/* 必要布局样式css */
.aui-flexView {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

.aui-scrollView {
	width: 100%;
	height: 100%;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	position: relative;
	/* margin-top: -44px; */
}

.aui-navBar {
	height: 44px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	z-index: 1002;
	background: #ffffff;
}

.aui-navBar:after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #ffffff;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.aui-navBar-item {
	height: 44px;
	min-width: 25%;
	-webkit-box-flex: 0;
	-webkit-flex: 0 0 25%;
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	padding: 0 0.9rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 0.7rem;
	white-space: nowrap;
	overflow: hidden;
	color: #a0a0a0;
	position: relative;
}

.aui-navBar-item:first-child {
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	margin-right: -25%;
	font-size: 0.9rem;
	font-weight: bold;
}

.aui-navBar-item:last-child {
	-webkit-box-ordinal-group: 4;
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.aui-center {
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 44px;
	width: 50%;
	margin-left: 25%;
}

.aui-center-title {
	text-align: center;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	font-size: 0.95rem;
	color: #3c3c3c;
}

.icon {
	width: 20px;
	height: 20px;
	display: block;
	border: none;
	float: left;
	background-size: 20px;
	background-repeat: no-repeat;
}

.icon-return {
	background-image: url("");
}

.icon-sys {
	background-image: url("");
	margin-right: 10px;
}

.icon-fre {
	background-image: url("");
}

.aui-news-box {
	margin-top: 58px;
	background: #fff;
}

.aui-news-item {
	padding: 15px;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.aui-news-item-hd {
	margin-right: .8em;
	line-height: 55px;
	text-align: center;
	background: #fff;
	border-radius: 15px;
}
	
.img{
	width: 55px;
	height: 55px;
}
.aui-news-item-hd img {
	width: 100%;
	max-height: 100%;
	vertical-align: top
}

.aui-news-item-bd {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	min-width: 0;
	margin-top: -40rpx;
}

.aui-news-item-bd h4 {
	font-weight: 400;
	font-size: 16px;
	width: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	word-wrap: break-word;
	word-break: break-all;
	padding-bottom: 10px;
	color: #333;
}

.aui-news-item-bd p {
	color: #848689;
	font-size: 13px;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.aui-news-item:before {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #d8d8d8;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.aui-news-item-fr {
	text-align: right;
	font-size: 0.8rem;
	color: #8c8c8c;
	margin-top: -25px;
}

</style>
